<template>
	<view>
		<view class="com_mask_bg" :class="{ on: on }">
			<view class="com_mask_content" :class="ani_position" :style="{ height: `${change_var.win_height}rpx` }">
				<view class="com_mask" :style="{ height: `${change_var.win_height}rpx` }" @touchmove.stop.prevent="moveHandle"></view>
				<view class="ani_view" :class="ani_type">
					<view class="bluetooth_page">
						<view class="bluetooth_page_top">
							<view class="bluetooth_page_title">查找设备</view>
							<view @click.stop="mask_click()" class="com_close">
								<myimg imgsrc="/static/images/com_close.png" width="30"></myimg>
							</view>
						</view>

						<view class="bluetooth_page_list">
							<scroll-view
								class="blue_list"
								:scroll-y="true"
								:style="{
									height: `${change_var.win_height * 0.6}rpx`,
								}"
							>
								<view class="blue_view" v-for="(item, index) in page_device_list" :key="index" @click="deviceId_click(item)">
									<view class="view jj_kb_a">
										<view class="info">
											<view class="ii">
												<image class="max100" src="/static/images/blue_tooth.png"></image>
											</view>

											<view class="tt">
												<view class="t1">
													{{ item.list_name }}
													<!-- 信号：{{ item.RSSI }} -->
												</view>
												<view class="t2">
													{{ item.list_id }}
												</view>
											</view>
										</view>

										<view class="status">
											<view class="suc" v-if="BLUETOOTH_DEVICE_CONFIG.bluetooth_deviceId == item.deviceId && BLUETOOTH_DEVICE_CONFIG.bluetooth_connect">
												<image class="sii" src="/static/images/connect_suc.png"></image>
											</view>
											<view class="show" v-else>
												<image class="wifi" :src="rssi_judge(item.RSSI)"></image>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'bluetoothPopup',
	props: {
		// bot_top 底部向上
		ani_type: {
			type: [String],
			default: 'bot_top',
		},

		ani_position: {
			type: [String],
			default: 'bot',
		},
		current_device: {
			type: [String],
			default: 'device_battery',
		},
		popup_config: {
			type: [Object],
			default: function () {
				return {};
			},
		},
	},
	data() {
		return {
			on: false,
			change_var: {},
			nextreq: true,
			page_device_list: [],
		};
	},
	created() {
		this.init_pagedata('bluetoothPopup');
	},
	watch: {},
	computed: {
		ani_view_style() {
			let padding = `60rpx`;

			return {
				padding,
			};
		},
	},
	methods: {
		...common,
		init_pagedata_callback() {
			let _this = this;
		},
		bluetoothPopup_init() {
			let _this = this;
			_this.bluetoothPopup_ready();
		},
		bluetoothPopup_ready() {
			let _this = this;
			_this.$nextTick(() => {
				_this.open_popup();
				_this.page_judge_fun();
			});
		},
		page_judge_fun() {
			let _this = this;
			let DEVICE_LIST = uni.getStorageSync('BLUETOOTH_DEVICE_LIST') || [];
			// 把已连接的设备添加到设备列表中
			if (_this.objJudge(DEVICE_LIST)) {
				_this.page_device_list = DEVICE_LIST.reduce((p, item) => {
					if (_this.objJudge(item.bluetooth_device_info) && item.bluetooth_connect) {
						p.push(item.bluetooth_device_info);
					}
					return p;
				}, []);
			}
			_this.startBluetoothDevicesDiscovery();
		},
		open_popup() {
			let _this = this;
			_this.on = true;
			_this.nextreq = true;
		},
		mask_click() {
			let _this = this;
			_this.on = false;
			_this.page_device_list = [];
			_this.stop_scan();
		},

		// 点击设备
		deviceId_click(device) {
			let _this = this;
			let { res_deviceId, res_mac, list_name } = device;
			// console.log(device);
			// console.log(_this.BLUETOOTH_DEVICE_CONFIG);
			if (_this.BLUETOOTH_DEVICE_CONFIG.bluetooth_deviceId == res_deviceId && _this.BLUETOOTH_DEVICE_CONFIG.bluetooth_connect) return;
			_this.create_connect_judge(res_deviceId, res_mac, device);
		},
		// 连接成功回调
		connect_callback() {
			let _this = this;
			_this.mask_click();
			_this.$emit('connect_callback');
		},
		// 信号强度图片
		rssi_judge(n) {
			let src = {
				high: '/static/images/wifi_3.png',
				middle: '/static/images/wifi_2.png',
				low: '/static/images/wifi_1.png',
			};
			if (n >= -55) {
				return src.high;
			} else if (n >= -75) {
				return src.middle;
			} else {
				return src.low;
			}
		},
		moveHandle() {
			// 禁止原生滚动
		},
	},
};
</script>

<style lang="scss">
.com_mask_bg {
	// width: 100%;
	// height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 990;
	visibility: hidden;

	&.on {
		visibility: visible;

		.com_mask {
			opacity: 1;
			visibility: visible;
		}

		.ani_view {
			&.bot_top {
				transform: translateY(0%);
			}

			&.scale {
				// transition: all 0s;
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.com_mask_content {
		width: 750rpx;
		height: 100vh;
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;

		&.bot {
			justify-content: flex-end;
		}

		&.top {
			justify-content: flex-start;
		}

		&.center {
			justify-content: center;
		}
	}

	.com_mask {
		// width: 100%;
		// height: 100%;
		background-color: rgba(0, 0, 0, 0.55);
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	.ani_view {
		position: relative;
		z-index: 2;
		// padding: 30rpx;
		width: 750rpx;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;

		&.bot_top {
			transform: translateY(100%);
		}

		&.scale {
			opacity: 0;
			transform: scale(1.05);
		}
	}
}

.bluetooth_page {
	// padding: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
	background-color: #eaedf2;
	overflow: hidden;
	.bluetooth_page_top {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
		background-color: #fff;
		.bluetooth_page_title {
			font-weight: 700;
			color: #333333;
			font-size: 32rpx;
			line-height: 64rpx;
		}
		.com_close {
			width: 90rpx;
			height: 90rpx;
		}
	}
}

.bluetooth_page_list {
	padding: 30rpx;
}
.blue_list {
	// display: flex;
	border-radius: 20rpx;
	// margin-top: 20rpx;

	background-color: #fff;

	&::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
	.blue_view {
		padding-left: 20rpx;

		.view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 14rpx 16rpx 14rpx 0;

			.info {
				display: flex;
				align-items: center;

				.ii {
					flex-shrink: 0;
					width: 70rpx;
					height: 70rpx;
				}

				.tt {
					.t1 {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.t2 {
						margin-top: 4rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.status {
				.show {
					.wifi {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.suc {
					display: flex;
					align-items: center;

					.stt {
						font-size: 24rpx;
						font-weight: 400;
						color: #1fd1c2;
						margin-right: 8rpx;
					}

					.sii {
						width: 36rpx;
						height: 36rpx;
						margin: 0 6rpx;
					}
				}
			}
		}
	}
}
</style>
